<template>
	<view class="newTab">
		<view class="headerContent">
			<view class="rezufather d-s-c d-r">
				<image :src="app_url + '/image/rezu.png'" class="rezu"></image>
				<view style="width: 70%">
					<u-tabs
						:list="list"
						lineWidth="30"
						lineColor="#5BC5BB"
						:activeStyle="{
							color: '#303133',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"
						:inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
						@change="changeHandle"
					></u-tabs>
				</view>
			</view>
		</view>
		<view>
			<scroll-view style="display: block" class="product-list column__3 scroll-view_H" scroll-x="true">
				<view class="product-item scroll-view-item_H" v-for="(product, index) in itemData.data" :key="index" @click="gotoDetail(product.product_id)">
					<!-- 两列三列 -->
					<view class="product-cover">
						<image :src="product.product_image" mode="aspectFill"></image>
					</view>
					<view class="product-info">
						<view v-if="itemData.style.show.productName == 1" class="product-title" style="font-weight: 900">
							{{ product.product_name }}
						</view>
						<view class="price d-s-c">
							<view v-if="itemData.style.show.productPrice == 1" class="theme-price" style="width: 100%">
								<view class="moneyDay">
									<view class="">
										<text class="f22">¥</text>
										<text class="f40" style="font-weight: 600">{{ product.product_price }}</text>
										<text class="f22">/天</text>
									</view>
									<!-- <view class="">
                    <text
                      class="f22"
                      style="color: #ccc; text-decoration: line-through"
                      >11.99/天</text
                    >
                  </view> -->
								</view>
							</view>
							<view class="ml20 gray9 text-d-line" v-if="itemData.style.show.linePrice == 1 && product.line_price > 0">
								<text class="f22">¥</text>
								{{ product.line_price }}/天5
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import config from '@/config.js';
export default {
	data() {
		return {
			app_url: config.app_url,
			itemData: {
				data: [],
				group: 'shop',
				name: '商品组',
				params: {
					source: 'choice',
					auto: {
						category: 65,
						productSort: 'all',
						showNum: '6'
					}
				},
				style: {
					background: '#F6F6F6',
					display: 'list',
					show: {
						linePrice: 0,
						productName: 1,
						productPrice: 1,
						productSales: 0,
						sellingPoint: 0
					}
				},
				type: 'product'
			},
			list: [
				{
					name: '新品爆款'
				},
				{
					name: '清仓大促'
				},
				{
					name: '潮玩体验'
				},
				{
					name: '休闲益智'
				}
			]
		};
	},
	props: ['dataList'],
	watch: {
		dataList: {
			handler(newVal, oldVal) {
				this.getList(newVal);
			},
			deep: true,
			immediate: true
		}
	},
	mounted() {
		if (this.list.length > 0) {
			this.changeHandle({ index: 0 });
		}
	},
	methods: {
		changeHandle({ index }) {
			const self = this;
			self._get('/product.category/get_category_list', {}, function (data) {
				self.queryGroup(data.data.category_id[index]);
			});
		},
		/*跳转产品详情*/
		gotoDetail(e) {
			let url = '/pages/product/detail/detail?product_id=' + e;
			this.gotoPage(url);
		},
		getList(list) {
			console.log(list, '商品组组组组组组组组');
			const result = list.data.map((item) => ({
				product_id: item.product_id,
				product_name: item.product_name,
				product_price: item.product_price,
				product_image: item.product_image,
				product_sales: item.product_sales
			}));
			this.itemData.data.length === 0 && this.itemData.data.push(...result);
		},

		queryGroup(index) {
			const self = this;
			const params = {
				category_id: index,
				list_rows: 9,
				page: 1,
				search: 0,
				sortPrice: 0,
				sortType: 'all'
			};

			this._get('/product.product/lists', params, function ({ data: { list } }) {
				self.itemData.data = [...list.data];
			});
		}
	}
};
</script>

<style>
.newTab {
	border-radius: 20rpx;
	overflow: hidden;
	margin: 20rpx 0;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
}

.rezufather {
	width: 100%;
	height: 80rpx;
	padding-left: 20rpx;
	background-image: linear-gradient(to bottom, #b3efee 0%, #d2eeee 50%, #ffffff 100%);
}

.rezu {
	height: 15px;
	width: 66px;
}

.newTab .headerContent {
	display: flex;
}

.newTab .product-list .product-cover image {
	width: 70%;
	height: 95%;
	margin: 0 auto;
}

.newTab .product-list .product-title {
	display: -webkit-box;
	font-size: 32rpx;
	overflow: hidden;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.newTab .product-list .product-info {
	white-space: normal;
}

.newTab .product-list.column__3 .product-title {
	margin-left: 10rpx;
	margin-right: 10rpx;
	height: 72rpx;
	line-height: 36rpx;
	font-size: 30rpx;
}

.newTab .product-list .price {
	font-size: 34rpx;
}

.newTab .product-list.column__3 .price {
	margin-top: 10rpx;
	padding: 0 10rpx;
	font-size: 28rpx;
}

.newTab .product-list.column__3 .price .text-d-line {
	font-size: 22rpx;
}

.newTab .display__slide .product-list {
	flex-wrap: nowrap;
}

.newTab .column__3 .product-cover {
	width: 200rpx;
	height: 200rpx;
}

.newTab .display__list .column__3 .product-item:nth-child(3n + 0) {
	margin-right: 0;
}

.newTab .column__3 .product-item {
	width: 200rpx;
	margin-bottom: 10rpx;
	margin-right: 10rpx;
	padding-bottom: 10rpx;
	border-radius: 8rpx;
	overflow: hidden;
}

.theme-price {
	color: red;
}

.moneyDay {
	text-align: center;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
	width: 100px;
	height: 100%;
	margin-right: 5px;
	text-align: center;
}
</style>
